<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="icon" href="/favicon.ico">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vite App</title>
  <link rel="stylesheet" href="bootstrap-5.3.0-alpha1-dist (1)\bootstrap-5.3.0-alpha1-dist\css\bootstrap.min.css">
</head>

<body>
  <div id="app">
    <div class="input-group mb-3">
      <div class="input-group-prepend">
        <button class="btn btn-outline-secondary" type="button" id="button-addon1" @click="add">提交</button>
      </div>
      <input type="text" class="form-control" placeholder="请输入品牌名称" aria-label="Example text with button addon"
        aria-describedby="button-addon1" v-model.trim="brand">
    </div>
    <table class="table">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">型号</th>
          <th scope="col">状况</th>
          <th scope="col">时间</th>
          <th scope="col">操作</th>
        </tr>
      </thead>
      <tbody>
  </div>

  <tr v-for="item in list" :key="item.id">
    <th scope="row">{{ item.id }}</th>
    <td>{{ item.name }}</td>
    <td>
      <input type="checkbox" v-model="item.status" title="check">
      <span v-if="item.status">启用</span>
      <span v-else>禁用</span>
    </td>
    <td>{{item.time|dateFormat}}</td>
    <td><a href="#" @click="remove(item.id)">删除</a></td>
  </tr>
  </tbody>
  </table>
  <script src="vue.js"></script>
  <script src="bootstrap-5.3.0-alpha1-dist (1)\bootstrap-5.3.0-alpha1-dist\js\bootstrap.min.js"></script>
  <script src="node_modules\dayjs\dayjs.min.js"></script>
  <script>
    //全局过滤器
    Vue.filter('dateFormat', function (time) {//dateFormat是侦听器函数名，time是参数
      const date = dayjs(time).format('YYYY年MM月DD日HH:mm:ss')
      return date
    })
    const vm = new Vue({
      el: '#app',
      data: {
        //下一个可用id
        nextId: 5,
        //用户输入的品牌
        brand: "",
        //品牌的列表
        list: [
          { id: 1, name: "宝马", status: true, time: new Date() },
          { id: 2, name: "奔驰", status: true, time: new Date() },
          { id: 3, name: "比亚迪", status: true, time: new Date() },
          { id: 4, name: "特斯拉", status: true, time: new Date() }
        ],
      },
      methods: {
        remove(id) {
          this.list = this.list.filter((item) => {
            if (item.id < id) { return item } else if (item.id > id) {
              item.id--
              return item
            }
          })
          this.nextId = this.list.length + 1
        },
        add() {
          if (this.brand === "") {
            alert("请填写内容再提交")
            return
          } else {
            const obj = {
              id: this.nextId,
              name: this.brand,
              status: true,
              time: new Date()
            }
            this.list.push(obj),
              this.brand = "",
              this.nextId++
          }
        }
      },
    })
  </script>
</body>

</html>